<template>
  <div :class="['b-sort flex flex-col cursor-pointer',{
    'b-sort--collapse':currentCollapse
  }]">
    <div class="b-sort__top flex justify-between items-center"
         @click="onCollapse">

      <div class="b-sort__top-left">
        <img :src="toggleSortImg"
             width="14"
             alt=""
             v-if="toggleSortImg">
        <span>{{$t('attribute.sort')}}</span>
      </div>
      <div class="b-sort__top-right">
        <ZTag type="green">
          <span>{{display.label}}</span>
          <ZIcon icon="el-icon-bottom"
                 v-if="display.sort === 'DESC'"
                 :size="12" />
          <ZIcon icon="el-icon-top"
                 v-else
                 :size="12" />
        </ZTag>
      </div>
    </div>
    <div class="flex flex-col b-sort__content overflow-hidden">
      <div class="b-sort__center flex  items-center"
           v-for="(item,index) in value"
           :key="item.field">
        <el-select v-model="item.field"
                   popper-class="sort-popper"
                   placeholder="Please select"
                   @change="(field)=>toggleField(item,index)"
                   size="small">
          <el-option v-for="i in fields"
                     :key="i.value"
                     :label="i.label"
                     :value="i.value">
            <div class="sort-popper-item flex justify-between items-center">
              <span>{{i.label}}</span>
              <ZIcon icon="cuifont icon_checkmark"
                     v-if="item.field === i.value"
                     :size="12" />
            </div>
          </el-option>
        </el-select>

        <ZIcon icon="el-icon-bottom"
               class="b-sort__center-icon"
               v-if="item.sort === 'DESC'"
               color="#838486"
               @click="toggleSort(item,index)"
               :size="22" />
        <ZIcon icon="el-icon-top"
               v-else
               color="#838486"
               @click="toggleSort(item,index)"
               class="b-sort__center-icon"
               :size="22" />
      </div>
      <div class="b-sort__bottom flex  items-center"
           @click.stop="backDefault">
        {{$t('custom.component.viewComponent.backDefaultSort')}}
      </div>
    </div>

  </div>
</template>

<script>
import ZTag from '@/components/storybook/z-tag'
import ZIcon from '@/components/storybook/z-icon'

const DEFAULT_FIELDS = Object.freeze([
  {
    value: 'name',
    label: 'Name'
  },

  {
    value: 'create_date',
    label: 'Created Date'
  },

  {
    value: 'update_date',
    label: 'Last Modified'
  }

])

export default {
  name: 'BSort',
  components: {
    ZTag,
    ZIcon
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    fields: {
      type: Array,
      default: () => DEFAULT_FIELDS
    },
    collapse: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      sourceCollapse: this.collapse
    }
  },
  computed: {
    toggleSortImg () {
      return `${window.SITE_CONFIG['ossAddressURL']}/app/view_pageheader/toggle_sort.png`
    },
    currentCollapse: {
      get () {
        return this.collapse
      },
      set (collapse) {
        this.sourceCollapse = collapse
        this.$emit('update:collapse', collapse)
      }
    },
    display () {
      if (Array.isArray(this.value) && this.value.length) {
        const { sort, field } = this.value[0]
        const item = this.fields.find(i => i.value === field) || {}
        return {
          sort,
          field,
          label: item.label
        }
      }

      return {}
    }
  },
  methods: {
    toggleSort (item, index) {
      item.sort = item.sort === 'DESC' ? 'ASC' : 'DESC'
      this.$emit('event:change-sort', item, index)
      this.$emit('event:change', item, index)
    },
    toggleField (item, index) {
      this.$emit('event:change-field', item, index)
      this.$emit('event:change', item, index)
    },
    backDefault () {
      this.$emit('event:back-default')
    },
    onCollapse () {
      this.currentCollapse = !this.currentCollapse
      this.$emit('event:collapse')
    }
  }
}
</script>

<style lang="scss">
.b-sort {
  background-color: #f6f7f9;
  white-space: nowrap;
  &__top {
    padding: 6px 16px;
    &-left {
      img {
        margin-right: 10px;
      }
    }
  }
  &__center {
    padding: 6px 16px;
    &-icon {
      margin-right: 6px;
      margin-left: 10px;
      transition: all 200ms;
      &:hover {
        background-color: #d8d8d8;
      }
    }
  }
  &__bottom {
    padding: 6px 16px;
    color: #17b3a3;
    &:hover {
      text-decoration: underline;
    }
  }
  &__content {
    height: auto;
  }
  &--collapse {
    background: #ffffff;
    &:hover {
      background-color: #f6f7f9;
    }
    .b-sort__content {
      height: 0;
    }
  }
}
</style>
